<template>
  <view class="ticket-list-page">
    <!-- 状态标签栏 -->
    <view class="status-tabs">
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 'available' }"
        @click="currentTab = 'available'"
      >
        可使用
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 'expired' }"
        @click="currentTab = 'expired'"
      >
        已过期
      </view>
    </view>

    <!-- 票券列表 -->
    <view class="ticket-list">
      <view 
        class="ticket-item" 
        v-for="(ticket, index) in filteredTickets" 
        :key="index"
        @click="goToTicketUseRecord(ticket, index)"
      >
        <!-- 票券类型标题 -->
        <text class="ticket-type">{{ ticket.type }}</text>
        
        <!-- 票券详情 -->
        <view class="ticket-details">
          <view class="detail-row">
            <text class="detail-label">可用数量：</text>
            <text class="detail-value">{{ ticket.availableCount }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">有效期：</text>
            <text class="detail-value" :class="{ expired: currentTab === 'expired' }">
              {{ ticket.validity }}
            </text>
          </view>
          <view class="detail-row">
            <text class="detail-label">可用时间：</text>
            <text class="detail-value">{{ ticket.availableTime }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">可用日期：</text>
            <text class="detail-value">{{ ticket.availableDays }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">购买时间：</text>
            <text class="detail-value">{{ ticket.purchaseTime }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前选中的标签
      currentTab: 'available',
      // 所有票券数据
      tickets: [
        // 可使用票券
        {
          type: '30次门票',
          availableCount: '30次(余15次)',
          validity: '30天',
          availableTime: '2025/5/11 00:00 - 2025/6/11 23:00',
          availableDays: '周一，周二，周三，周四，周五，周六，周日',
          purchaseTime: '2025/5/11 00:00',
          status: 'available'
        },
        {
          type: '计时票',
          availableCount: '30分钟(含15分钟)',
          validity: '30天',
          availableTime: '2025/5/11 00:00 - 2025/6/11 23:00',
          availableDays: '周一，周二，周三，周四，周五，周六，周日',
          purchaseTime: '2025/5/11 00:00',
          status: 'available'
        },
        {
          type: '期限票',
          availableCount: '30次(余15次)',
          validity: '30天',
          availableTime: '2025/5/11 00:00 - 2025/6/11 23:00',
          availableDays: '周一，周二，周三，周四，周五，周六，周日',
          purchaseTime: '2025/5/11 00:00',
          status: 'available'
        },
        // 已过期票券
        {
          type: '30次门票',
          availableCount: '30次(余15次)',
          validity: '已过期',
          availableTime: '2025/5/11 00:00 - 2025/6/11 23:00',
          availableDays: '周一，周二，周三，周四，周五，周六，周日',
          purchaseTime: '2025/5/11 00:00',
          status: 'expired'
        },
        {
          type: '计时票',
          availableCount: '30分钟(含15分钟)',
          validity: '已过期',
          availableTime: '2025/5/11 00:00 - 2025/6/11 23:00',
          availableDays: '周一，周二，周三，周四，周五，周六，周日',
          purchaseTime: '2025/5/11 00:00',
          status: 'expired'
        },
        {
          type: '期限票',
          availableCount: '30次(余15次)',
          validity: '已过期',
          availableTime: '2025/5/11 00:00 - 2025/6/11 23:00',
          availableDays: '周一，周二，周三，周四，周五，周六，周日',
          purchaseTime: '2025/5/11 00:00',
          status: 'expired'
        }
      ]
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.memberTicketList')
  	});
  },
  computed: {
    // 根据当前标签筛选票券
    filteredTickets() {
      return this.tickets.filter(ticket => ticket.status === this.currentTab);
    }
  },
  methods: {
    // 跳转到票券使用记录页面
    goToTicketUseRecord(ticket, index) {
      uni.navigateTo({
        url: '/pages/member/member-ticket-use-record'
      });
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.ticket-list-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 状态标签栏 */
.status-tabs {
  display: flex;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
}

.tab-item {
  flex: 1;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 16px;
  color: #666666;
  position: relative;
}

.tab-item.active {
  color: #333333;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background-color: #ff4d4f;
}

/* 票券列表 */
.ticket-list {
  padding: 12px;
}

/* 票券项 */
.ticket-item {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

.ticket-item:active {
  background-color: #f5f5f5;
}

/* 票券类型标题 */
.ticket-type {
  display: block;
  font-size: 16px;
  color: #333333;
  font-weight: 500;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #f0f0f0;
}

/* 票券详情区域 */
.ticket-details {
  margin-top: 10px;
}

/* 详情行 */
.detail-row {
  display: flex;
  margin-bottom: 9px;
  line-height: 1.5;
}

.detail-row:last-child {
  margin-bottom: 0;
}

/* 详情标签 */
.detail-label {
  font-size: 14px;
  color: #666666;
  width: 90px;
  flex-shrink: 0;
}

/* 详情值 */
.detail-value {
  font-size: 14px;
  color: #333333;
  flex: 1;
  word-break: break-all;
}

/* 过期样式 */
.expired {
  color: #999999;
}
</style>